/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
    <div>
        <el-popover
            ref="popovers"
            placement="bottom"
            width="260"
            v-model="visible2">
            <div class="label" style="overflow:hidden">
              <el-button v-if="!isRoutine" @click="changeLane()" style="float:right" type="text">{{$t('edge.channelizationmap.expandpeddirection')}}>></el-button>
              <el-button v-if="isRoutine" @click="changeLanes()" style="float:right" type="text">{{$t('edge.channelizationmap.conventionalpeddirection')}}>></el-button>
            </div>
            <div class="main" v-for="(item, index) in imgs" v-if="index < sum && !isRoutine" :key="index" :class="{'oneRowH': index === 3 || index === 13, 'twoRowH': index === 11 }">
                <div class="label" v-if="index === 0">{{$t('edge.channelizationmap.pedestriancrossing')}}</div>
                <div class="label" v-if="index === 4">{{$t('edge.channelizationmap.pedestriansecondarycrossing')}}</div>
                <div class="label" v-if="index === 12">{{$t('edge.channelizationmap.obliquepedestriancrossing')}}</div>
                <div class="label" v-if="index === 14">{{$t('edge.channelizationmap.sectionpedestriancrossing')}}</div>
                <div :style="tankuangSize" :class="status[index] ? 'phaseSelected' : 'phaseNoSelected'" @click="boxShow(index)">
                  <div v-if="item.class" :class="item.class" style="border:0px"></div>
                  <div v-if="item.img" :style="{'backgroundImage': `url(${item.img})`, 'border':'0px', 'background-size': '43px', 'width': '100%', 'height': '56px', 'background-repeat': 'no-repeat','background-position': 'center'}"></div>
                </div>
            </div>
            <div class="main" v-for="(item, index) in imgs" v-if="isRoutine && index > 15" :key="index" :class="{'oneRowH': index === 3 || index === 13 || index === 15, 'twoRowH': index === 11 }">
                <div class="label" v-if="index === 16">{{$t('edge.channelizationmap.diagonalcrosswalk')}}</div>
                <div class="label" v-if="index === 20">{{$t('edge.channelizationmap.expandpedcrossing')}}</div>
                <div :style="tankuangSize" :class="status[index] ? 'phaseSelected' : 'phaseNoSelected'" @click="boxShow(index)">
                  <div v-if="item.class" :class="item.class" style="border:0px"></div>
                  <div v-if="item.img" :style="{'backgroundImage': `url(${item.img})`, 'border':'0px', 'background-size': '43px', 'width': '100%', 'height': '56px', 'background-repeat': 'no-repeat','background-position': 'center'}"></div>
                </div>
            </div>
            <span v-text="name" :class="showBottomName ? 'showSpan' : 'hiddenSpan'"></span>
            <el-input :disabled="disabled" slot="reference" size="small" v-model="name" :readonly="true"></el-input>
          </el-popover>
          <span v-text="name" class="showSpan" v-show="showSpan"></span>
          <span class="showDirIcon" v-show="showDirIcon && list.length > 0">
            <xdrdirselector :Data="laneIconStyle" :Datas="pedIconStyle" Width="60px" Height="60px" :showlist="getPedDirectionList(list)" v-if="list.length > 0"></xdrdirselector>
          </span>
    </div>
</template>
<script>
import xdrdirselector from '../XRDDirSelector'
import { getTheme } from '../../utils/auth'
import PhaseDataModel from 'openatc-components/package/kisscomps/components/IntersectionMap/crossDirection/utils'

export default {
  name: 'dragTankang-demo',
  data () {
    return {
      visible2: false,
      name: '',
      isRoutine: false,
      status: [],
      sum: 0 // 弹框一共分几个小图标（弹框的布局）
    }
  },
  components: {
    xdrdirselector
  },
  props: {
    imgs: {
      type: [Array, Object],
      required: true
    },
    list: {
      type: Array,
      default () {
        return []
      }
    },
    index: {
      type: Number
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showBottomName: {
      type: Boolean,
      default: false
    },
    lines: {
      type: Number
    },
    rows: {
      type: Number
    },
    showSpan: {
      type: Boolean,
      default: true
    },
    refresh: {
      type: Boolean,
      default: false
    },
    showDirIcon: {
      type: Boolean,
      default: false
    },
    laneIconStyle: {
      type: Object,
      default: () => ({
        left: '60px',
        top: '10px'
      })
    },
    pedIconStyle: {
      type: Object,
      default: () => ({
        left: '60px',
        top: '15px'
      })
    }
  },
  watch: {
    refresh: {
      handler: function (val) {
        if (val) {
          this.refreshData()
        }
      }
    }
  },
  created () {
    this.refreshData()
  },
  methods: {
    changeLane () {
      this.isRoutine = true
      this.updatePopover()
    },
    changeLanes () {
      this.isRoutine = false
      this.updatePopover()
    },
    updatePopover () {
      this.$nextTick(() => {
        this.$refs.popovers.updatePopper()
      })
    },
    refreshData () {
      this.status = []
      for (let obj of this.imgs) {
        if (this.list.length > 0 && this.list.includes(obj.id)) {
          this.status.push(1)
        } else {
          this.status.push(0)
        }
      }
      this.name = this.getName()
      // 根据行列计算最多展示的图标
      this.sum = this.lines * this.rows
    },
    boxShow (index) {
      this.status[index] = !this.status[index]
      this.name = this.getName()
      this.toParent()
    },
    toParent () {
      let parameter = {}
      parameter.status = this.status
      parameter.index = this.index
      this.$emit('finsh', parameter)
    },
    getName () {
      let name = ''
      for (let i = 0; i < this.status.length; i++) {
        if (!this.status[i]) continue
        name = name + ',' + this.imgs[i].name
      }
      if (name !== '') {
        return name.substr(1)
      } else {
        return ''
      }
    },
    getPedDirectionList (peddirection) {
      let dirArr = []
      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
      let recd = {
        peddirection: this.getPed(peddirection),
        color: color
      }
      dirArr.push(recd)
      return dirArr
    },
    getPed (data) {
      if (data.length === 0) return []
      let ped = []
      let peddirections = []
      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
      for (let walk of data) {
        let objs = {}
        objs.name = new PhaseDataModel().getSidePos(walk).name
        objs.id = walk
        objs.color = color
        peddirections.push(objs)
        peddirections = Array.from(new Set(peddirections))
      }
      ped.push(...peddirections)
      return ped
    }
  },
  computed: {
    // 根据行列计算弹框排版
    tankuangSize () {
      let lines = this.lines
      let widths = ((100 / lines) - 2) + '%'
      let styleObj = {
        width: widths
      }
      return styleObj
    }
  }
}
</script>
<style lang="scss">
// * {
//     margin: 0;
//     padding: 0;
// }
.main {
  // background-color: #fff;
  width: 100%;
  // padding-bottom: 100%;
  padding-left: 0.5%;
  // padding-top: 0.5%;
}

.oneRowH {
  height: 71px;
}
.twoRowH {
  height: 128px;
}

// .main>div{
//     width: 23%;
//     /* padding-bottom: 23%; */
//     border: 1% solid #fff;
//     background-color: #ecf5ff;
//     border-radius: 3%;
//     float: left;
//     margin: 1%;
//     cursor: pointer;
// }
// .phaseNoSelected{
//     // width: 23%;
//     /* padding-bottom: 23%; */
//     border: 1% solid #fff;
//     background-color: #ecf5ff;
//     border-radius: 3%;
//     float: left;
//     margin: 1%;
//     cursor: pointer;
// }
// .phaseSelected{
//     // width: 23%;
//     /* padding-bottom: 23%; */
//     border: 1% solid #fff;
//     background-color: #409EFF;
//     border-radius: 3%;
//     float: left;
//     margin: 1%;
//     cursor: pointer;
// }
body {
    overflow: auto;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
.showSpan {
  display: block;
}
.hiddenSpan {
  display: none;
}
.phase-icon {
  background-image: red;
}
</style>
